<!--
 * @Descripttion: GGB
 * @version: 1.0
 * @Author: GGB
 * @Date: 2021-12-11 09:40:20
 * @LastEditors: GGB
 * @LastEditTime: 2021-12-11 12:40:15
-->
<template>
  <div>
    <!-- 新增 -->
    <!-- <input
      v-model="newTodo"
      @keyup.enter.stop="addTodo"
      autofocus
      placeholder="新增今日待办"
      autocomplete="off"
    ></input> -->
    <!-- <EditTodo
      v-model="newTodo"
      @keyup.enter.stop="addTodo"
      autofocus
      placeholder="新增今日待办"
      autocomplete="off"
    ></EditTodo> -->
    <EditTitle
      v-model:todo-title="newTodo"
      @keyup.enter.stop="addTodo"
      autofocus
      placeholder="新增今日待办"
      autocomplete="off"
    ></EditTitle>

    <!-- TODO 列表 -->
    <ul>
      <TodoItem
        @remove-todo="removeTodo"
        v-model:edited-todo="editedTodo"
        :todo="todo"
        v-for="todo in filterdTodos"
        :key="todo.id"
      />
    </ul>
    <!-- 过滤 -->
    <Filter :items="filterItems" v-model="visibility"></Filter>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import EditTodo from "./EditTodo.vue";
import EditTitle from "./EditTitle.vue";
import TodoItem from "./TodoItem.vue";
import Filter from "./Filter.vue";
import { useTodos } from "./useTodo";
import { useFilters } from "./useFilter";

export default {
  setup() {
    const todoState = reactive({
      newTodo: "",
      editedTodo: null, // 正在编辑的待办事项
    });
    const { todos, removeTodo, addTodo } = useTodos(todoState);
    const filterState = useFilters(todos);
    return {
      ...toRefs(filterState),
      ...toRefs(todoState),
      removeTodo,
      addTodo,
    };
  },
  components: { EditTodo, EditTitle, TodoItem, Filter },
};
</script>

<style scoped></style>
